<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 表单 -->
        <div>
            <span>说明：目前支持学科和关键字条件筛选</span>
            <el-form ref="form" :model="questionForm" label-position="right">
              <el-form-item style="display:flex; justify-content:flex-end" >
              <el-button type="success" icon="el-icon-edit" size="small" @click="$router.push('/questions/new')">新增试题</el-button>
              </el-form-item>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="学科" label-width="80px">
                    <el-select v-model="questionForm.subjectID" @change="subjectChange" placeholder="请选择">
                      <el-option v-for="item in subjectList " :key="item.id" :value="item.value" :label="item.label"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="二级目录" label-width="80px">
                    <el-select v-model="questionForm.catalog" placeholder="请选择">
                      <el-option v-for="item in directoryList " :key="item.value" :value="item.value" :label="item.label"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="标签" label-width="80px">
                    <el-select v-model="questionForm.tags" placeholder="请选择">
                      <el-option v-for="item in tagList" :key="item.value" :value="item.value" :label="item.label"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="关键字" label-width="80px">
                    <el-input v-model="questionForm.keyword" placeholder="根据题干搜索"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
              <el-form-item label="试题类型" label-width="80px">
                <el-select v-model="questionForm.questionType" placeholder="请选择">
                  <el-option v-for="(value, key) in questionType" :key="key" :value="key" :label="value"></el-option>
                </el-select>
              </el-form-item>
                </el-col>
                <el-col :span="6">
              <el-form-item label="难度" label-width="80px">
                <el-select v-model="questionForm.difficulty" placeholder="请选择">
                  <el-option v-for="(value, key) in difficulty" :key="key" :label="value" :value="key"></el-option>
                </el-select>
              </el-form-item>
                </el-col>
              <el-col :span="6">
              <el-form-item label="方向" label-width="80px">
                <el-select v-model="questionForm.direction" placeholder="请选择">
                  <el-option v-for="item in direction" :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
              </el-col>
              <el-col :span="6">
              <el-form-item label="录入人" label-width="80px">
                <el-select v-model="questionForm.creatorID" placeholder="请选择">
                  <el-option v-for="item in creatorList" :key="item.id" :label="item.username" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="题目备注" label-width="80px">
                    <el-input v-model="questionForm.remarks"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="企业简称" label-width="80px">
                    <el-input v-model="questionForm.shortName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="城市" label-width="80px">
                    <el-select v-model="questionForm.province" placeholder="请选择" @focus="getProvince" style="width: 50%">
                      <el-option v-for="item in provinces" :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                    <el-select v-model="questionForm.city" placeholder="请选择" @focus="getCitys" style="width: 50%">
                      <el-option v-for="(item,index) in citys" :key="index" :value="item"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                 <el-form-item label-width="80px" style="display:flex; justify-content:flex-end">
                    <el-button size="small" @click="removeQuestion" >清除</el-button>
                    <el-button size="small" type="primary" @click="clicksearch" >搜索</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
          </el-form>
        </div>
        <!-- abs 标签页 -->
        <template>
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <!-- 全部表格数据 -->
            <el-tab-pane label="全部" name="first">
              <!-- 提示框 -->
              <div class="tips">
                <i class="el-icon-info"></i>
                <span>数据一共 {{ counts }} 条</span>
              </div>
              <!-- 表格 -->
              <div class="table">
                <template>
                <el-table :data="tableData" style="width: 100%" :header-cell-style="{ background:'#FAFAFA',color:'#919398',borderBottom: '2px solid #E8E8E8'}">
                  <el-table-column prop="number" label="试题编号" width="120">
                  </el-table-column>
                  <el-table-column prop="subject" label="学科" width="100">
                  </el-table-column>
                  <el-table-column prop="catalog" label="目录" width="100">
                  </el-table-column>
                  <el-table-column prop="questionType" label="题型" width="100">
                    <template #default="{ row }">
                      {{ questionType[row.questionType] }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="question" label="题干" width="300" >
                    <template #default="{ row }">
                      {{ clearHtmlTag(row.question) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="addDate" label="录入时间" width="180">
                    <template #default="{ row }">
                      {{ dateFormat(row.addDate) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="difficulty" label="难度" width="100">
                      <template #default="{ row }">
                      {{ difficulty[row.difficulty] }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="creator" label="录入人" width="100">
                  </el-table-column >
                  <el-table-column prop="chkState" label="审核状态" width="100">
                    <template #default="{ row }">
                      {{ chkState[row.chkState] }}
                    </template>
                  </el-table-column >
                  <el-table-column prop="chkRemarks" label="审核意见" width="100">
                  </el-table-column >
                  <el-table-column prop="chkUser" label="审核人" width="100">
                  </el-table-column >
                  <el-table-column prop="chkState" label="发布状态" width="100">
                    <template #default="{ row }">
                      {{ publishState[row.publishState]}}
                    </template>
                  </el-table-column >
                  <el-table-column label="操作" width="200" fixed="right" >
                    <template #default="{ row }">
                      <el-button type="text" size="small" @click="previewDialog(row.id)">预览</el-button>
                      <el-button type="text" size="small" @click="auditDialog(row)" :disabled="row.chkState === 0 ? false : true">审核</el-button>
                      <el-button type="text" size="small" :disabled="row.publishState === 1 ? true : false" @click="$router.push('/questions/new')">修改</el-button>
                      <el-button type="text" size="small" @click="clickChoicePublish(row)">{{ row.publishState === 0 ? '上架' : '下架' }}</el-button>
                      <el-button type="text" size="small" @click="delChoicePublish(row.id)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
              </div>
              <!-- 分页器 -->
              <el-pagination
                background
                @size-change="handleSizeChange"
                :hide-on-single-page="value"
                @current-change="handleCurrentChange"
                :current-page="choiceData.page"
                :page-size="choiceData.pagesize"
                layout=" prev, pager, next, sizes, jumper"
                :total="counts"
                :page-sizes="[5, 10, 20, 50]"
                >
              </el-pagination>
            </el-tab-pane>
            <!-- 待审核表格数据 -->
            <el-tab-pane label="待审核" name="second">
              <!-- 提示框 -->
              <div class="tips">
                <i class="el-icon-info"></i>
                <span>数据一共 {{ pendingCounts }} 条</span>
              </div>
              <!-- 表格 -->
              <div class="table">
                <template>
                <el-table :data="pendingTableData" style="width: 100%" :header-cell-style="{ background:'#FAFAFA',color:'#919398',borderBottom: '2px solid #E8E8E8'}">
                  <el-table-column prop="number" label="试题编号" width="120">
                  </el-table-column>
                  <el-table-column prop="subject" label="学科" width="100">
                  </el-table-column>
                  <el-table-column prop="catalog" label="目录" width="100">
                  </el-table-column>
                  <el-table-column prop="questionType" label="题型" width="100">
                    <template #default="{ row }">
                      {{ questionType[row.questionType] }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="question" label="题干" width="300" >
                    <template #default="{ row }">
                      {{ clearHtmlTag(row.question) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="addDate" label="录入时间" width="180">
                    <template #default="{ row }">
                      {{ dateFormat(row.addDate) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="difficulty" label="难度" width="100">
                      <template #default="{ row }">
                      {{ difficulty[row.difficulty] }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="creator" label="录入人" width="100">
                  </el-table-column >
                  <el-table-column prop="chkState" label="审核状态" width="100">
                    <template #default="{ row }">
                      {{ chkState[row.chkState] }}
                    </template>
                  </el-table-column >
                  <el-table-column prop="chkRemarks" label="审核意见" width="100">
                  </el-table-column >
                  <el-table-column prop="chkUser" label="审核人" width="100">
                  </el-table-column >
                  <el-table-column prop="chkState" label="发布状态" width="100">
                    <template #default="{ row }">
                      {{ publishState[row.publishState]}}
                    </template>
                  </el-table-column >
                  <el-table-column label="操作" width="200" fixed="right" >
                    <template #default="{ row }">
                      <el-button type="text" size="small" @click="previewDialog(row.id)">预览</el-button>
                      <el-button type="text" size="small" @click="auditDialog(row)" :disabled="row.chkState === 0 ? false : true">审核</el-button>
                      <el-button type="text" size="small" :disabled="row.publishState === 1 ? true : false" @click="$router.push('/questions/new')">修改</el-button>
                      <el-button type="text" size="small" @click="clickChoicePublish(row)">{{ row.publishState === 0 ? '上架' : '下架' }}</el-button>
                      <el-button type="text" size="small" @click="delChoicePublish(row.id)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
              </div>
              <!-- 分页器 -->
              <el-pagination
                background
                @size-change="handleSizeChange"
                :hide-on-single-page="value"
                @current-change="handleCurrentChange"
                :current-page="choiceData.page"
                :page-size="choiceData.pagesize"
                layout=" prev, pager, next, sizes, jumper"
                :total="pendingCounts"
                :page-sizes="[5, 10, 20, 50]"
                >
              </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="已审核" name="third">
              <!-- 提示框 -->
              <div class="tips">
                <i class="el-icon-info"></i>
                <span>数据一共 {{ auditedCounts }} 条</span>
              </div>
              <!-- 表格 -->
              <div class="table">
                <template>
                <el-table :data="auditedTableData" style="width: 100%" :header-cell-style="{ background:'#FAFAFA',color:'#919398',borderBottom: '2px solid #E8E8E8'}">
                  <el-table-column prop="number" label="试题编号" width="120">
                  </el-table-column>
                  <el-table-column prop="subject" label="学科" width="100">
                  </el-table-column>
                  <el-table-column prop="catalog" label="目录" width="100">
                  </el-table-column>
                  <el-table-column prop="questionType" label="题型" width="100">
                    <template #default="{ row }">
                      {{ questionType[row.questionType] }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="question" label="题干" width="300" >
                    <template #default="{ row }">
                      {{ clearHtmlTag(row.question) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="addDate" label="录入时间" width="180">
                    <template #default="{ row }">
                      {{ dateFormat(row.addDate) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="difficulty" label="难度" width="100">
                      <template #default="{ row }">
                      {{ difficulty[row.difficulty] }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="creator" label="录入人" width="100">
                  </el-table-column >
                  <el-table-column prop="chkState" label="审核状态" width="100">
                    <template #default="{ row }">
                      {{ chkState[row.chkState] }}
                    </template>
                  </el-table-column >
                  <el-table-column prop="chkRemarks" label="审核意见" width="100">
                  </el-table-column >
                  <el-table-column prop="chkUser" label="审核人" width="100">
                  </el-table-column >
                  <el-table-column prop="chkState" label="发布状态" width="100">
                    <template #default="{ row }">
                      {{ publishState[row.publishState]}}
                    </template>
                  </el-table-column >
                  <el-table-column label="操作" width="200" fixed="right" >
                    <template #default="{ row }">
                      <el-button type="text" size="small" @click="previewDialog(row.id)">预览</el-button>
                      <el-button type="text" size="small" @click="auditDialog(row)" :disabled="row.chkState === 0 ? false : true">审核</el-button>
                      <el-button type="text" size="small" :disabled="row.publishState === 1 ? true : false" @click="$router.push('/questions/new')">修改</el-button>
                      <el-button type="text" size="small" @click="clickChoicePublish(row)">{{ row.publishState === 0 ? '上架' : '下架' }}</el-button>
                      <el-button type="text" size="small" @click="delChoicePublish(row.id)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
              </div>
              <!-- 分页器 -->
              <el-pagination
                background
                @size-change="handleSizeChange"
                :hide-on-single-page="value"
                @current-change="handleCurrentChange"
                :current-page="choiceData.page"
                :page-size="choiceData.pagesize"
                layout=" prev, pager, next, sizes, jumper"
                :total="auditedCounts"
                :page-sizes="[5, 10, 20, 50]"
                >
              </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="已拒绝" name="fourth">
              <!-- 提示框 -->
              <div class="tips">
                <i class="el-icon-info"></i>
                <span>数据一共 {{ rejectedCounts }} 条</span>
              </div>
              <!-- 表格 -->
              <div class="table">
                <template>
                <el-table :data="rejectedTableData" style="width: 100%" :header-cell-style="{ background:'#FAFAFA',color:'#919398',borderBottom: '2px solid #E8E8E8'}">
                  <el-table-column prop="number" label="试题编号" width="120">
                  </el-table-column>
                  <el-table-column prop="subject" label="学科" width="100">
                  </el-table-column>
                  <el-table-column prop="catalog" label="目录" width="100">
                  </el-table-column>
                  <el-table-column prop="questionType" label="题型" width="100">
                    <template #default="{ row }">
                      {{ questionType[row.questionType] }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="question" label="题干" width="300" >
                    <template #default="{ row }">
                      {{ clearHtmlTag(row.question) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="addDate" label="录入时间" width="180">
                    <template #default="{ row }">
                      {{ dateFormat(row.addDate) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="difficulty" label="难度" width="100">
                      <template #default="{ row }">
                      {{ difficulty[row.difficulty] }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="creator" label="录入人" width="100">
                  </el-table-column >
                  <el-table-column prop="chkState" label="审核状态" width="100">
                    <template #default="{ row }">
                      {{ chkState[row.chkState] }}
                    </template>
                  </el-table-column >
                  <el-table-column prop="chkRemarks" label="审核意见" width="100">
                  </el-table-column >
                  <el-table-column prop="chkUser" label="审核人" width="100">
                  </el-table-column >
                  <el-table-column prop="chkState" label="发布状态" width="100">
                    <template #default="{ row }">
                      {{ publishType[row.publishType]}}
                    </template>
                  </el-table-column >
                  <el-table-column label="操作" width="200" fixed="right" >
                    <template #default="{ row }">
                      <el-button type="text" size="small" @click="previewDialog(row.id)">预览</el-button>
                      <el-button type="text" size="small" @click="auditDialog(row)" :disabled="row.chkState === 0 ? false : true">审核</el-button>
                      <el-button type="text" size="small" :disabled="row.publishState === 1 ? true : false" @click="$router.push('/questions/new')">修改</el-button>
                      <el-button type="text" size="small" @click="clickChoicePublish(row)">{{ row.publishState === 0 ? '下架' : '上架' }}</el-button>
                      <el-button type="text" size="small" @click="delChoicePublish(row.id)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
              </div>
              <!-- 分页器 -->
              <el-pagination
                background
                @size-change="handleSizeChange"
                :hide-on-single-page="value"
                @current-change="handleCurrentChange"
                :current-page="choiceData.page"
                :page-size="choiceData.pagesize"
                layout=" prev, pager, next, sizes, jumper"
                :total="rejectedCounts"
                :page-sizes="[5, 10, 20, 50]"
                >
              </el-pagination>
            </el-tab-pane>
          </el-tabs>
        </template>
          <!-- 表格 -->
          <template>
            <div class="previewDialog">
              <!-- 预览弹出框 -->
              <el-dialog
                title="题目预览"
                :visible="dialogVisible"
                width="60%"
                @close="clisepreviewDialog"
                >
                  <!-- 弹出框内容 -->
                  <el-descriptions :column="4">
                      <el-descriptions-item label="【题型】">{{ questionType[descriptionsData.questionType] }}</el-descriptions-item>
                      <el-descriptions-item label="【编号】">{{ descriptionsData.id }}</el-descriptions-item>
                      <el-descriptions-item label="【难度】">{{ difficulty[descriptionsData.difficulty] }}</el-descriptions-item>
                      <el-descriptions-item label="【标签】">{{ descriptionsData.tags }}</el-descriptions-item>
                      <el-descriptions-item label="【学科】">{{ descriptionsData.subjectName }}</el-descriptions-item>
                      <el-descriptions-item label="【目录】">{{ descriptionsData.directoryName }}</el-descriptions-item>
                      <el-descriptions-item label="【方向】">{{ descriptionsData.direction }}</el-descriptions-item>
                  </el-descriptions>
                  <el-divider></el-divider>
                  <el-descriptions direction="vertical" >
                      <el-descriptions-item label="【题干】" :contentStyle="{ color:'#1C1DF6' }">{{ clearHtmlTag(descriptionsData.question) }}
                        <template>
                          <p style="color: #606266">{{ questionType[descriptionsData.questionType] }} 选项:（以下选中的选项为正确答案）</p>
                          <!-- 单选框显示的内容 -->
                          <template v-if="descriptionsData.questionType === '1'">
                            <el-radio v-model="radio" v-for="item in optionsData" :key="item.id" :label="item.code" style="display:block; margin-top:15px">{{ item.title }}</el-radio>
                          </template>
                          <!-- 多选框显示的内容 -->
                          <template v-else-if="descriptionsData.questionType === '2'">
                            <el-checkbox-group v-model="checkList" >
                              <el-checkbox v-for="item in optionsData" :key="item.id" :label="item.code" style="display:block; margin-top:15px">{{ item.title }}</el-checkbox>
                              <!-- <el-checkbox :label="item.option.code" style="display:block; margin-bottom: 10px"></el-checkbox> -->
                            </el-checkbox-group>
                          </template>
                        </template>
                      </el-descriptions-item>
                  </el-descriptions>
                  <el-divider></el-divider>
                  <template >
                  <el-descriptions>
                      <el-descriptions-item label="【参考答案】">
                        <span>
                        <el-button type="danger" size="small" @click="video = !video">视频答案预览</el-button>
                        </span>
                      </el-descriptions-item>
                  </el-descriptions>
                  <div >
                    <video v-bind:src="descriptionsData.videoURL" controls="controls" class="videoBox" v-if="video"></video>
                  </div>
                  </template>
                  <el-divider></el-divider>
                  <el-descriptions >
                      <el-descriptions-item label="【答案解析】">{{ clearHtmlTag(descriptionsData.answer) }}</el-descriptions-item>
                  </el-descriptions>
                  <el-divider></el-divider>
                  <el-descriptions :column="4">
                      <el-descriptions-item label="【题目备注】">{{ descriptionsData.remarks }}</el-descriptions-item>
                  </el-descriptions>
                  <div class="dialogFoot">
                    <el-button type="primary" @click="clisepreviewDialog" class="dialogButton">关闭</el-button>
                  </div>
              </el-dialog>
              <!-- 审核弹出框 -->
              <el-dialog
                title="题目审核"
                :visible="auditDialogVisible"
                width="30%"
                @close="closeDialogVisible"
                >
                <el-form ref="auditDialogRef" :v-model="auditDialogForm">
                  <el-form-item >
                    <el-radio-group v-model="auditDialogForm.chkState">
                      <!-- <el-radio v-model="radio" label="1">备选项</el-radio> -->
                      <el-radio :label="1">同意</el-radio>
                      <el-radio :label="2">拒绝</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item >
                    <el-input type="textarea" v-model="auditDialogForm.chkRemarks" placeholder="请输入审核意见"></el-input>
                  </el-form-item>
                </el-form>
                <div class="dialogFoot">
                  <el-button @click="closeDialogVisible" class="dialogButton1">取 消</el-button>
                  <el-button type="primary" @click="submitDialogVisible" class="dialogButton">确 定</el-button>
                </div>
              </el-dialog>
            </div>
          </template>
      </el-card>
    </div>
  </div>
</template>

<script>
// 引入预览对话框组件
// import previewDialog from '@/module-hmmm/pages/questions-choice/previewDialog.vue'
// 导入接口 精选题库列表 / 题库详情 / 试题审核 /精选题库上下架 / 删除基础题库
import { choice, choiceDetail, choiceCheck, choicePublish, removeDetail } from '@/api/hmmm/questions'
// 引入dayjs
import dayjs from 'dayjs'
// 导入枚举
import { direction, publishType } from '@/api/hmmm/constants'
// 导入过滤器
import { parseTimeByString } from '@/filters'
import { simple } from '@/api/hmmm/subjects'
import { simple as directorySimple } from '@/api/hmmm/directorys'
import { simple as tagsSimple } from '@/api/hmmm/tags'
import { simple as CreatorSimple } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
export default {
  name: 'questions-choice',
  data () {
    return {
      parseTimeByString,
      // 精选题库列表接口
      // 精选题库列表接口
      choiceData: {
        page: 1,
        pagesize: 5
      },
      // 表单数据
      questionForm: {
        subjectID: '', // 学科
        tags: '', // 标签
        catalog: '', // 二级目录
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 省份
        city: ''// 城市
      },
      // 全部表格数据
      tableData: [],
      counts: 0,
      // 待审核表格数据
      pendingTableData: [],
      pendingCounts: 0,
      // 已审核表格数据
      auditedTableData: [],
      auditedCounts: 0,
      // 已拒绝表格数据
      rejectedTableData: [],
      rejectedCounts: 0,
      // tabs 标签页
      activeName: 'first',
      // questionType,
      direction,
      publishType,
      // difficulty,
      subjectList: [],
      directoryList: [],
      tagList: [],
      creatorList: [],
      provinces: [],
      citys: [],
      PreviewDialogVisible: false,
      previewId: '',
      // 利用枚举来判断题型
      questionType: {
        1: '单选',
        2: '多选',
        3: '简答'
      },
      // 利用枚举来判断难度
      difficulty: {
        1: '简单',
        2: '一般',
        3: '困难'
      },
      // 利用枚举来判断审核状态
      chkState: {
        0: '待审核',
        1: '已审核',
        2: '已拒绝'
      },
      publishState: {
        0: '已下架',
        1: '已发布',
        2: '待发布'
      },
      // 预览对话框
      dialogVisible: false,
      // 描述列表数据
      descriptionsData: {},
      // 题干多选框
      checkList: [],
      // 题干options数据
      optionsData: [],
      // 单选框
      radio: '2',
      // 分页器
      // 当只有一页时隐藏分页
      value: false,
      // 视频解析
      video: false,
      // 审核弹出框
      auditDialogVisible: false,
      // 审核框表单
      auditDialogForm: {
        chkState: 1,
        chkRemarks: ''
      },
      // 试题审核接口数据
      choiceCheckData: {},
      // 搜索按钮数据
      clicksearchData: {},
      // 上下架判断
      publishStateNew: 0
    }
  },
  // 打开页面调接口
  created () {
    this.applyChoice()
    this.getsubjectSimple()
    this.getCreatorSimple()
  },
  methods: {
    // tabs 标签页
    handleClick (tab, event) {
      console.log('tabs标签页', tab, event)
    },
    // 获取精选题库列表
    async applyChoice () {
      const res = await choice(this.choiceData)
      console.log('精选题库列表', res)
      // 列表
      this.tableData = res.data.items
      this.counts = res.data.counts
      // 不同选项列表渲染
      // 待审核
      // this.pendingTableData = []
      const res0 = await choice({
        ...this.choiceData,
        chkState: 0
      })
      console.log('待审核精选题库列表', res0)
      // 列表
      this.pendingTableData = res0.data.items
      this.pendingCounts = res0.data.counts
      // 已审核
      // this.auditedTableData = []
      const res1 = await choice({
        ...this.choiceData,
        chkState: 1
      })
      console.log('待审核精选题库列表', res1)
      // 列表
      this.auditedTableData = res1.data.items
      this.auditedCounts = res1.data.counts
      // 已拒绝
      // this.rejectedTableData = []
      const res2 = await choice({
        ...this.choiceData,
        chkState: 2
      })
      console.log('待审核精选题库列表', res2)
      // 列表
      this.rejectedTableData = res2.data.items
      this.rejectedCounts = res2.data.counts
    },
    // 获取学科简单列表
    async getsubjectSimple () {
      const { data } = await simple()
      this.subjectList = data
    },
    // 学科列表值变化时,根据学科id,发送axios获取目录列表和标签列表
    async subjectChange () {
      // 获取目录简单列表
      const { data } = await directorySimple({ subjectID: this.questionForm.subjectID })
      // console.log(data)
      this.directoryList = data
      // 获取标签列表
      const { data: res } = await tagsSimple({ subjectID: this.questionForm.subjectID })
      // console.log(res)
      this.tagList = res
      // 清空v-model绑定的数据
      this.questionForm.catalog = ''
      this.questionForm.tags = ''
    },
    // 获取录入人列表
    async getCreatorSimple () {
      const { data } = await CreatorSimple()
      // console.log(data)
      this.creatorList = data
    },
    // 获取城市
    getProvince () {
      this.provinces = provinces()
    },
    // 获取区
    getCitys () {
      this.citys = citys(this.questionForm.province)
    },
    provinceChange () {
      this.questionForm.city = ''
    },
    // 清除按钮
    removeQuestion () {
      this.questionForm = {
        subjectID: '', // 学科
        tags: '', // 标签
        catalog: '', // 二级目录
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 省份
        city: ''// 城市
      }
      this.applyChoice()
    },
    // 搜索按钮
    async clicksearch () {
      this.clicksearchData = {}
      for (const key in this.questionForm) {
        // console.log('搜索数据', key)
        if (this.questionForm[key] !== '') {
          // console.log('搜索数据', this.questionForm[key])
          this.clicksearchData[key] = this.questionForm[key]
        }
      }
      // console.log('搜索要传递的数据', this.clicksearchData)
      const res = await choice({
        ...this.clicksearchData,
        ...this.choiceData
      })
      console.log('搜索按钮', res)
      this.tableData = res.data.items
      this.counts = res.data.counts
      // 重置表单
      this.$refs.form.resetFields()
    },
    // 搜索题库
    previewQuestion (id) {
      this.PreviewDialogVisible = true
      this.previewId = id
    },
    // 表格渲染-格式
    // 时间标准化
    dateFormat (date) {
      return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
    },
    // 替换题干中的标签
    clearHtmlTag (str) {
      // console.log(str)
      if (str) {
        return str.replace(/<[^>]+>/g, '')
      }
    },
    // 预览对话框
    async previewDialog (id) {
      this.dialogVisible = true
      const res = await choiceDetail(id)
      console.log('2', res)
      // 表格数据赋值
      this.descriptionsData = res.data
      // 选择框数据
      this.optionsData = res.data.options
      console.log('选择框数据', this.optionsData)
      // 遍历数组--添加到多选框选中
      this.optionsData.forEach(item => {
        if (item.isRight === 1) {
          console.log(item)
          // 多选框
          this.checkList.push(item.code)
          // 单选框
          this.radio = item.code
        }
      })
    },
    // 关闭预览对话框
    clisepreviewDialog () {
      // console.log(111)
      this.dialogVisible = false
    },
    // 分页器
    handleCurrentChange (val) {
      console.log(val)
      this.choiceData.page = val
      // 渲染精选题库列表
      this.applyChoice()
    },
    handleSizeChange (val) {
      console.log('每页多少条', val)
      this.choiceData.pagesize = val
    },
    // 审核对话框
    auditDialog (row) {
      this.auditDialogVisible = true
      this.choiceCheckData = row
    },
    // 关闭审核对话框
    closeDialogVisible () {
      this.auditDialogVisible = false
      // 清空表单
      this.$refs.auditDialogRef.resetFields()
    },
    // 提交审核
    async submitDialogVisible () {
      const res = await choiceCheck({
        ...this.auditDialogForm,
        id: this.choiceCheckData.id
      })
      console.log('审核接口', res)
      // 提示
      this.$message.success('审核成功')
      // 从新渲染页面
      this.applyChoice()
      // 关闭页面
      this.closeDialogVisible()
    },
    // 上下架
    async clickChoicePublish (row) {
      // const publishStateNew = !row.publishState
      if (!row.publishState) {
        this.publishStateNew = 1
      } else {
        this.publishStateNew = 0
      }
      const Text = this.publishStateNew === 1 ? '上' : '下'
      // 上架
      this.$confirm(`您确认${Text}架这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 调接口
        const res = await choicePublish({
          ...row,
          publishState: this.publishStateNew
        })
        console.log(res)
        // 渲染页面
        this.applyChoice()
        // 提示
        this.$message.success(`${Text}架成功`)
      }).catch(() => {
        this.$message({})
      })
      console.log('上下架', row)
    },
    // 删除
    delChoicePublish (id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await removeDetail(id)
        console.log('删除', res)
        // 从新渲染页面
        this.applyChoice()
        this.$message.success('删除成功')
      }).catch(() => {})
    }
  }
}
</script>

<style scoped lang="scss">
// 表单
.el-select {
  width: 100%;
}
span {
  font-size: 12px;
  float: left;
  color: #f3b4be;
}
.dialogFoot {
  margin-top: 40px;
}
.dialogButton {
  position: absolute;
  bottom: 20px;
  right: 20px;
}
.dialogButton1 {
  position: absolute;
  bottom: 20px;
  right: 110px;
}
// 分页器
.el-pagination {
  margin: 20px 0;
  float: right;
}
// 提示框
.tips {
  background-color: #f6f4f4;
  height: 40px;
  width: 100%;
  padding-left: 20px;
  margin: 10px 0;
  border-radius: 6px;
  i {
    float: left;
    color: #83858b;
    line-height: 40px;
     font-size: 14px;
  }
  span {
    line-height: 40px;
    margin-left: 10px;
    font-size: 12px;
    color: #83858b;

  }
}
.videoBox {
  width: 400px;
  height: 300px;
}
</style>
